<!--导航栏左侧-->
<template>
  <nav>
    <div class="logo"></div>
    <router-link to="/search">
      <div class="el-menu-item">关键词检索</div>
    </router-link>
    <router-link to="/prop">
      <div class="el-menu-item">专业名词库</div>
    </router-link>
    <router-link to="/center">
      <div class="el-menu-item">个人中心</div>
    </router-link>
    <router-link to="/records">
      <div class="el-menu-item">检索记录</div>
    </router-link>
    <router-link to="/feedbacks">
      <div class="el-menu-item">信息反馈</div>
    </router-link>
    <router-link to="/words">
      <div class="el-menu-item">词库管理</div>
    </router-link>
  </nav>
</template>

<script>
  export default {
    name: 'Breadcrumb',
  };
</script>

<style lang="scss" scoped>
  nav {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
  }

  nav .el-menu-item {
    color: #1a1919;
    padding: 1px 100px;
    position: relative;
    text-align: center;
    border-bottom: transparent;
    display: flex;
    transition: 0.4s;
    font-size: larger;
    font-weight: bold;
  }
  nav .el-menu-item:hover {
    background-color: rgba(96, 98, 102, 0.22);
    border-bottom: solid 6px;
    border-bottom-color: #030365;
    height: 80px;
  }
  .logo {
    margin-left: 15em;
    width: 110px;  /* 设置icon的宽度 */
    height: 50px;  /* 设置icon的高度 */
    background-image: url('src/assets/logo.jpg');  /* 设置背景图片 */
    background-size: cover;  /* 让背景图片覆盖整个内容区域 */
    background-repeat: no-repeat;  /* 不重复显示背景图片 */
    background-position: center;  /* 让背景图片居中显示 */
  }
</style>
